import { useLocation } from "react-router-dom";
import { useEffect } from "react";

const NotFound = () => {
  const location = useLocation();

  useEffect(() => {
    console.error("404 Error: User attempted to access non-existent route:", location.pathname);
  }, [location.pathname]);

  return (
    <div className="flex min-h-screen items-center justify-center bg-background">
      <div className="text-center card-healing">
        <div className="text-6xl mb-4">🍅</div>
        <h1 className="mb-4 text-4xl font-bold text-primary">404</h1>
        <p className="mb-6 text-xl text-muted-foreground">哎呀！页面不见了</p>
        <p className="mb-8 text-muted-foreground">看起来这个页面去做运动了，让我们回到主页吧</p>
        <a 
          href="/" 
          className="inline-flex items-center px-6 py-3 bg-gradient-to-r from-tomato to-mint text-white rounded-full font-semibold hover:scale-105 transition-transform duration-200"
        >
          回到首页
        </a>
      </div>
    </div>
  );
};

export default NotFound;
